<template>
  <a-modal v-model="visible" title="编辑微信素材" :centered="true" width="800px" :destroyOnClose="true" @ok="save" :confirmLoading="confirmLoading">
    <a-form-model ref="rulesForm" :model="form" :rules="rules" :labelCol="{ lg: { span: 5 }, sm: { span: 9 } }" :wrapperCol="{ lg: { span: 15 }, sm: { span: 24 } }">
      <a-form-model-item label="小程序卡片图" prop="xcxImg">
        <JImageUpload :uploadParams="getUploadParams()" :fileSize="0.5" :accept="'image/*'" @fileChange="fileXcxImageChange" v-model="xcxImg"></JImageUpload>
        <div class="upload__tip" style="line-height: 16px;">500x400，支持jpg/png/gif格式，文件大小不超过500k</div>
      </a-form-model-item>
      <a-form-model-item label="小程序卡片文案" prop="xcxText">
        <a-textarea v-model="form.xcxText" placeholder="请输入" auto-size :max-length="36" />
      </a-form-model-item>
    </a-form-model>
    <!-- <div class="btn">
      <a-button type="primary" @click="save">保存</a-button>
      <a-button @click="save" style="margin-left:18px">取消</a-button>
    </div> -->
  </a-modal>
</template>
<script>
import globalData from '@/assets/js/common'
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import { createMaterial } from '@/api/box/theme'
export default {
  components: { JImageUpload },
  data() {
    return {
      visible: false,
      id: '',
      form: {},
      xcxImg: [],
      rules: {
        xcxImg: [{ required: true, message: '请上传卡片图', trigger: ['blur', 'change'] }],
        xcxText: [{ required: true, message: '请输入文案，最多36个字', trigger: 'blur', max: 36 }]
      },
      confirmLoading: false
    }
  },
  watch: {
    visible(val) {
      if (!val) {
        this.form = {}
      }
    }
  },
  methods: {
    show(id, item) {
      this.visible = true
      this.id = id
      if (id != 'add') {
        this.form = {
          xcxText: item.title,
          id: item.id,
          xcxImg: [item.imgUrl]
        }
        this.xcxImg = [item.imgUrl]
      }
    },
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    fileXcxImageChange(list) {
      console.log('list', list)
      this.form.xcxImg = list
    },
    save() {
      this.confirmLoading = true
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          console.log(this.form)
          let params = {
            requestData: {
              imgUrl: this.form.xcxImg[0].url,
              title: this.form.xcxText
            }
          }
          if (this.id != 'add') {
            params.requestData.id = this.id
          }
          createMaterial(params).then(res => {
            this.confirmLoading = false
            if (res.code == 0) {
              this.$message.success('创建成功！')
              this.$emit('refreshList')
              this.visible = false
            } else {
              this.$message.warning(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
